<template>
  <transition :enter-active-class="enterClass" :leave-active-class="leaveClass">
    <div class="lsDialogPanel ls-panel ls-flexV ls-flex-unShrink" tabindex="0" @keyup.esc.stop="closeDialog('byKey')"
         :class="{center:boxCenter}">
      <div class="lsDialogTitle ls-flex ls-flex-between ls-flex-centerV" :class="{lsDraggable:draggableFlag}"
           ref="triggerDom" @dblclick="toggleFullScreen">
        <div @mousemove.stop @mousedown.stop style="cursor: auto">{{ titleText }}</div>
        <div style="font-size: 18px">
          <i class="el-icon-full-screen ls-text-hover" style="margin: 0 0.2em" v-if="showFullScreen"
             @click="toggleFullScreen"></i>
          <i class="el-icon-close ls-text-hover" @click="closeDialog('byButton')"></i>
        </div>
      </div>
      <div class="lsDialogBody" :class="{fit100:fitHeight}">
        <slot></slot>
      </div>
      <div v-if="showFooter" class="ls-flex ls-flex-end" style="padding: 0 1em 1em 1em">
        <slot name="footer">
          <el-button @click="closeDialog('byButton')">取 消</el-button>
          <el-button type="primary" style="margin-left: 1em" @click="confirm">确 认</el-button>
        </slot>
      </div>
    </div>
  </transition>
</template>

<script>
import lsDialogPanel from "./lsDialogPanel";

export default lsDialogPanel;
</script>

<style>
.lsDialogPanel {
  position: absolute;
  outline: none;
  box-sizing: border-box;
  min-width: 160px;
}

.lsDialogPanel.center {
  transform: translate(-50%, -50%);
}

.lsDialogTitle {
  padding: 0.5em 1em;
  border-bottom: var(--el-border);
  color: var(--el-text-color-primary);
  font-size: 16px;
  background-color: var(--el-border-color-dark);
  user-select: none;
}

.lsDialogTitle.lsDraggable {
  cursor: move;
}

.lsDialogBody {
  padding: 1em;
  flex-grow: 1
}

.lsDialogBody.fit100 {
  height: 0;
}

@keyframes zoomInTranslate {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.animate__zoomIn.translate {
  animation-name: zoomInTranslate;
}

@keyframes zoomOutTranslate {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    transform: translate(-50%, -50%) scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

.animate__zoomOut.translate {
  animation-name: zoomOutTranslate;
}
</style>
